<script setup>
import { debounce } from "lodash";
import { ref, nextTick, onActivated, onDeactivated } from "vue";
import {
  getplaylist,
  getRecplaylist,
  getBoutique,
  getRankList,
  getSelect,
  selectList,
} from "../../apis/music";
import { createWindow } from "../../utils/ipcRenderer";
import { Local } from "../../utils/storage";

const isActive = ref(0);
const loading = ref(false);

const scrollbar = ref();
const height = ref();
//保存滚动条高度
const handleScroll = debounce((data) => {
  height.value = data.scrollTop;
}, 200);

onActivated(() => {
  scrollbar.value.wrap$.scrollTop = height.value;
  // scrollbar.value.wrap$.scrollTo({ behavior: "smooth", top: 1600 });
});

// onDeactivated(() => {
//   console.log(scrollbar.value.wrap$.scrollTop);
//   height.value = scrollbar.value.wrap$.scrollTop;
// });

const showList = ref([]);
if (Local.get("musicCategory")) {
  showList.value = Local.get("musicCategory");
} else {
  showList.value = ["推荐歌单", "网友精选", "精品歌单", "排行榜", "..."];
}

const playList = ref([]);
const before = ref("");
const isMore = ref(false);
const isShow = ref(false);
const categories = ref(["语种", "风格", "场景", "情感", "主题"]);
const showNameList = ref([]);
const yz = ref([]);
const fg = ref([]);
const cj = ref([]);
const qg = ref([]);
const zt = ref([]);

const handleClick = (id) => {
  createWindow({
    windowName: "songListDetail",
    path: "songListDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

//添加分类
const handleAdd = (item, index) => {
  if (showList.value.indexOf(item) == -1) {
    showList.value.splice(-1, 0, item);
  } else {
    showList.value.splice(showList.value.indexOf(item), 1);
  }
  Local.set("musicCategory", showList.value);
};

//获取分类
const getInit = async () => {
  let res = await getplaylist();
  showNameList.value = res.sub;
  yz.value = showNameList.value
    .map((v) => (v.category == "0" ? v.name : ""))
    .filter((s) => s.trim());
  fg.value = showNameList.value
    .map((v) => (v.category == "1" ? v.name : ""))
    .filter((s) => s.trim());
  cj.value = showNameList.value
    .map((v) => (v.category == "2" ? v.name : ""))
    .filter((s) => s.trim());
  qg.value = showNameList.value
    .map((v) => (v.category == "3" ? v.name : ""))
    .filter((s) => s.trim());
  zt.value = showNameList.value
    .map((v) => (v.category == "4" ? v.name : ""))
    .filter((s) => s.trim());
};
getInit();

//切换歌单分类
const handleCut = async (item, index) => {
  loading.value = true;
  isActive.value = index;
  isMore.value = false;
  if (item !== "...") {
    playList.value = [];
  }
  before.value = "";
  switch (item) {
    case "...":
      isShow.value = !isShow.value;
      loading.value = false;

      break;
    case "推荐歌单":
      getRecplaylist1();
      break;
    case "精品歌单":
      getBoutique1();
      break;
    case "排行榜":
      getRankList1();
      break;
    case "网友精选":
      getSelect1();
      break;
    default:
      selectList1(item);
  }
};

//获取推荐歌单
const getRecplaylist1 = async () => {
  loading.value = true;
  let res = await getRecplaylist(100);
  if (res.code == 200) {
    playList.value = res.result;
    loading.value = false;
  }
};

getRecplaylist1();

//获取精品歌单
const getBoutique1 = async () => {
  loading.value = true;
  let res = await getBoutique(50, before.value);
  if (res.code == 200) {
    before.value = res.lasttime;
    playList.value = [...playList.value, ...res.playlists];
    isMore.value = res.more;
    loading.value = false;
  }
};
//获取排行榜歌单
const getRankList1 = async () => {
  let res = await getRankList();
  playList.value = res.list;
  loading.value = false;
};
//获取网友精选歌单
const getSelect1 = async () => {
  let res = await getSelect(100);
  if (res.code == 200) {
    playList.value = res.playlists;
    loading.value = false;
  }
};

//通过名字获取歌单
const selectList1 = async (item) => {
  let res = await selectList(item);
  playList.value = res.playlists;
  loading.value = false;
};
</script>

<template>
  <div v-loading="loading" class="found_container">
    <!-- <div class="title">发现</div> -->
    <el-scrollbar ref="scrollbar" @scroll="handleScroll" style="height: 100%">
      <div class="category_list">
        <div
          :class="{ active: isActive == index }"
          @click="handleCut(item, index)"
          v-for="(item, index) in showList"
          :key="index"
          class="item"
        >
          {{ item }}
        </div>
      </div>

      <div class="content_wrap">
        <transition name="el-zoom-in-top">
          <div v-show="isShow" class="show_name">
            <div class="show_name_wrap">
              <div class="category_title">语种</div>
              <div class="name_wrap">
                <div
                  @click="handleAdd(item1, index1)"
                  class="name_list"
                  v-for="(item1, index1) in yz"
                  :key="index1"
                  :class="{ active: showList.indexOf(item1) !== -1 }"
                >
                  {{ item1 }}
                </div>
              </div>
            </div>
            <div class="show_name_wrap">
              <div class="category_title">风格</div>
              <div class="name_wrap">
                <div
                  @click="handleAdd(item1, index1)"
                  class="name_list"
                  v-for="(item1, index1) in fg"
                  :key="index1"
                  :class="{ active: showList.indexOf(item1) !== -1 }"
                >
                  {{ item1 }}
                </div>
              </div>
            </div>
            <div class="show_name_wrap">
              <div class="category_title">场景</div>
              <div class="name_wrap">
                <div
                  @click="handleAdd(item1, index1)"
                  class="name_list"
                  v-for="(item1, index1) in cj"
                  :key="index1"
                  :class="{ active: showList.indexOf(item1) !== -1 }"
                >
                  {{ item1 }}
                </div>
              </div>
            </div>
            <div class="show_name_wrap">
              <div class="category_title">情感</div>
              <div class="name_wrap">
                <div
                  @click="handleAdd(item1, index1)"
                  class="name_list"
                  v-for="(item1, index1) in qg"
                  :key="index1"
                  :class="{ active: showList.indexOf(item1) !== -1 }"
                >
                  {{ item1 }}
                </div>
              </div>
            </div>
            <div class="show_name_wrap">
              <div class="category_title">主题</div>
              <div class="name_wrap">
                <div
                  @click="handleAdd(item1, index1)"
                  class="name_list"
                  v-for="(item1, index1) in zt"
                  :key="index1"
                  :class="{ active: showList.indexOf(item1) !== -1 }"
                >
                  {{ item1 }}
                </div>
              </div>
            </div>
          </div>
        </transition>
        <div class="content">
          <div
            v-for="(item, index) in playList"
            :key="index"
            style="position: relative"
            class="image"
          >
            <div @click="handleClick(item.id)" class="image_wrap">
              <el-image
                lazy
                :src="item.picUrl ? item.picUrl+`${'?param=500y500'}}` : item.coverImgUrl +`${'?param=500y500'}}`"
              >
                <template #placeholder>
                  <div class="image-slot">
                    Loading<span class="dot">...</span>
                  </div>
                </template>
              </el-image>
            </div>

            <span class="name">{{ item.name }}</span>
          </div>
        </div>
        <div v-show="isMore" class="more">
          <div @click="getBoutique1">加载更多</div>
        </div>
      </div>
      <upbar></upbar>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.found_container {
  height: 100%;
  .title {
    font-size: 35px;
    font-weight: 600;
    padding: 0px 0px 20px 0;
  }
  .category_list {
    background-color: #fff;
    position: sticky;
    top: 0px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    z-index: 100;
    padding: 0 18px;
    .item {
      margin-right: 20px;
      font-size: 17px;
      font-weight: 600;
      background-color: #f5f5f7;
      padding: 7px 15px;
      border-radius: 8px;
      color: #7a7a7b;
      margin-bottom: 15px;
      &:hover {
        color: #335eea;
        background-color: #eaeffd;
      }
    }
    .active {
      color: #335eea;
      background-color: #eaeffd;
    }
  }
  .content_wrap {
    width: 100%;
    height: calc(100% - 100px);
    top: 30px;
    // margin-top: 30px;
    .el-zoom-in-top-enter-active {
      transition: all 0.5s;
    }
    .el-zoom-in-top-leave-active {
      transition: all 0.5s;
    }
    .show_name {
      // padding: 20px 30px;
      position: absolute;
      width: 100%;
      height: 480px;
      background-color: #f5f5f7;
      z-index: 99;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      .show_name_wrap {
        padding: 20px 35px;
        display: flex;
        .category_title {
          width: 60px;
          font-size: 22px;
          font-weight: 600;
          color: #4f4f4f;
        }
        .name_wrap {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          .name_list {
            font-size: 17px;
            color: #333333;
            text-align: left;
            padding: 5px 15px;
            border-radius: 10px;
            margin-bottom: 10px;
            margin-right: 6px;
            &:hover {
              background-color: #eaeffd;
              color: #335eea;
            }
          }
          .active {
            color: #335eea;
            background-color: #eaeffd;
          }
        }
      }
    }
    .content {
      // display: flex;
      // flex-wrap: wrap;
      cursor: pointer;
      padding-top: 10px;
      display: grid;
      justify-content: space-around;
      grid-template-columns: repeat(auto-fill, 16vw);
      .image {
        margin-bottom: 45px;
        .image_wrap {
          position: relative;
          .el-image {
            box-shadow: 0 3px 3px 1px rgb(230, 228, 228);
            width: 15vw;
            border-radius: 10px;
            aspect-ratio: 1/1;
            transition: all 0.2s;
            &:hover {
              transform: translateY(-8px);
            }
          }
        }
      }
      .name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .more {
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      div {
        font-weight: 600;
        cursor: pointer;
        background-color: #f7f7f9;
        padding: 10px 20px;
        color: #393939;
        border-radius: 10px;
        transition: 0.2s;
        &:hover {
          transform: scale(1);
        }
        &:active {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>
